<template>
    <div class="container">
        <div class="header">
            <van-nav-bar title="购物车" left-text="返回" right-text left-arrow fixed @click-left="onClickLeft"/>
        </div>
         <div class="selectAll">
             <div class="left"><van-checkbox v-model="selectAll" checked-color="#07c160">全选</van-checkbox></div>
             <div class="right">删除</div>
         </div>
        <div class="content">
           <ul>
               <li>
                   <div class="boxHeader">
                       <div class="left">
                           <van-checkbox v-model="selectShop" checked-color="#07c160"></van-checkbox>
                           <span>马克杯ins店铺</span>
                       </div>
                       <div class="right"><van-icon name="arrow" /></div>
                   </div>
                   <div class="boxList">
                       <div class="boxItem">
                           <van-swipe-cell :right-width="65" >
                                <van-cell-group>
                                    <div class="swipeBox">
                                        <div class="selectBox">
                                            <van-checkbox v-model="selectItem" checked-color="#07c160"></van-checkbox>
                                        </div>
                                        <div class="info">
                                            <div class="mainInfo">
                                                <div class="pic"><img src="../../assets/images/banner.png" alt=""></div>
                                                <div class="rows">
                                                    <div class="title">马克杯ins粉色少女心 都后才q马克杯ins粉色少女心</div>
                                                    <div class="subtitle">大理石纹灰色</div>
                                                    <div class="price">¥ 35.00</div>
                                                    <div class="time">使用时间：2019-2-25</div>
                                                </div>
                                            </div>
                                            <div class="total">
                                                <div class="left">小计：<span>￥35.00</span></div>
                                                <div class="right">
                                                    <img src="../../assets/images/reduce2.png" alt="" @click="reduceNum">
                                                    <span>1</span>
                                                    <img src="../../assets/images/add2.png" alt="" @click="addNum">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </van-cell-group>
                                <span slot="right" class="swipeRight">
                                    <img src="../../assets/images/trash.png" alt="">
                                </span>
                            </van-swipe-cell>
                       </div>
                       
                   </div>
               </li>
           </ul>
        </div>
         <div class="footer">
             <div class="left">合计：<span>￥35.00</span></div>
             <div class="right">结算</div>
         </div>
    </div>
</template>
<script>
export default {
    name:'shoppingCar',
    data(){
        return {
            selectAll: true,
            selectShop:true,
            selectItem:true,
        };
    },
    mounted(){},
    methods:{
         //返回
         onClickLeft() {
             this.$router.back();
        },
          //加数字
    addNum(){
      this.formData.goodsNum++;
    },
    //减数字
     reduceNum(){
       if(this.formData.goodsNum>1){
          this.formData.goodsNum--;
       };
    },
    }
}
</script>
<style  scoped>
.container{
    padding-top:.96rem;
    padding-bottom:.6rem;
}
.selectAll{
    background:#fff;
    display:flex;
    display:-webkit-flex;
    justify-content: space-between;
    align-items: center;
    width:100%;
    height:.5rem;
    padding:0 .16rem;
    position: fixed;
    top:.46rem;
    left:0;
}
.selectAll .right {
    color:#00be47;
}
.footer{
    position: fixed;
    bottom:0;
    left:0;
    width:100%;
    height:.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background:#fff;
}
.footer .left {
    padding-left:.16rem;
}
.footer .left span {
    color:#ff3336;
    font-size:.18rem;
}
.footer .right {
    width:1rem;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background:#01be47;
    color:#fff;
}
.content{
    margin-top:.05rem;
}
.content li {
    background:#fff;
    padding:0 .16rem;
    margin-bottom:.23rem;
}
.boxHeader{
    width:100%;
    height:.46rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
   
}
.boxHeader .left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.boxHeader .left span {
    padding-left:.1rem;
    color:#333333;
    font-size:.16rem;
}
.boxItem {
 border-top:1px solid #f0f0f0;
}
.swipeBox{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width:100%;
}
.swipeBox .selectBox {
    padding-bottom:.42rem;
}
.swipeBox .info{
 margin-left:.1rem;
 width:calc(100% - .3rem);
}
.swipeBox .info .mainInfo{
    padding:.2rem 0;
     display: flex;
    justify-content: flex-start;
    align-items: center;
    width:100%;
}
.swipeBox .info .mainInfo .pic img{
    width:.7rem;
}
.swipeBox .info .mainInfo .rows{
    padding-left:.2rem;
    width:calc(100% - .7rem);
    /* width:1rem; */
}
.swipeBox .info .mainInfo .rows .title{
    font-size:.16rem;
    color:#333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width:100%;
}
.swipeBox .info .mainInfo .rows .subtitle {
    color:#808080;
    font-size:.14rem;
}
.swipeBox .info .mainInfo .rows .price{
    font-size:.15rem;
    color:#ff3336;
}
.swipeBox .info .mainInfo .rows .time{
    font-size:.12rem;
    color:#333333;
}
.swipeBox .info .total {
    width:100%;
     display: flex;
    justify-content: space-between;
    align-items: center;
    height:.46rem;
    border-top:1px solid #f0f0f0;
}
.swipeBox .info .total .right img {
    width:.18rem;
}
.swipeBox .info .total .right span {
    padding:0 .1rem;
}
.swipeRight{
     display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
    
    border-left:1px solid #f0f0f0;
}
.swipeRight img{
    width:.35rem;
}
</style>
<style>
.van-checkbox__label{
    color:#808080 !important;
}
.van-swipe-cell__left, .van-swipe-cell__right{
    width:65px;
    padding-bottom:.56rem;
    padding-top:.1rem;
}
</style>




